<div class="OutDiv">
  <div class="mainPage">
    <div class="leftTree">
      <!--      <div class="titleTop">楼栋/楼层管理</div>-->
      <div class="flex flex-direction-column treeDom">
        <div class="treeDomBtn" *ngIf="showBtns == 1">
          <button nz-button nzType="primary" (click)="addBuild()" style="margin-bottom: 5px;">
            <i nz-icon nzType="plus" nzTheme="outline"></i>新增校区
          </button>
        </div>
        <div class="treeText">
          <ul id="treeText" class="ztree"></ul>
        </div>
      </div>
    </div>
    <div class="rightDiv">
      <!--      <div class="titleTop">房间管理</div>-->
      <div class="exciseTableDiv">
        <div class="searchDiv fl-r" style="margin-bottom: 15px">
          <label>
            <span>房间号：</span>
            <input nz-input [(ngModel)]="roomNumber" placeholder="请输入"/>
          </label>
          <label>
            <span>房间名称：</span>
            <input nz-input [(ngModel)]="roomName" placeholder="请输入"/>
          </label>
          <label style="margin-right: 0">
            <button nz-button style="margin-right:10px" nzType="primary"
                    (click)="pageList()">查询
            </button>
            <button nz-button nzType="default"
                    (click)="reset()">重置
            </button>
          </label>
        </div>
        <div class="tableTop fl-l" style="margin-bottom: 15px" *ngIf="showBtns == 1">
          <button nz-button nzType="primary" (click)="addRoom()">
            <i nz-icon nzType="plus" nzTheme="outline"></i>新增
          </button>
          <button nz-button nzType="default"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定删除所选房间吗?"
                  (nzOnCancel)="cancelFn()"
                  (nzOnConfirm)="deleteAll()"
                  [disabled]="canDelete"
                  nzPlacement="top"
          >
            <i nz-icon nzType="delete" nzTheme="outline"></i>删除
          </button>
        </div>
        <div style="margin-top: 35px;clear: both">
          <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords ? pageInfo.totalRecords : 0 }}条
          </ng-template>
          <nz-table
            nzBordered
            [nzData]="list"
            [nzFrontPagination]="false"
            [nzShowPagination]="true"
            [nzPageIndex]="pageInfo.first"
            [nzTotal]="pageInfo.totalRecords"
            [nzShowTotal]="totalTemplate"
            [nzPageSize]="pageInfo.rows"
            [nzLoadingDelay]="1"
            [nzPageSizeOptions]="[10,20,30,50,100]"
            [nzShowQuickJumper]="true"
            [nzShowSizeChanger]="true"
            (nzPageIndexChange)=" this.pageInfo.first = $event;this.page()"
            (nzPageSizeChange)="this.pageInfo.rows = $event;this.page()"
            (nzCurrentPageDataChange)="currentPageDataChange($event)"
          >
            <thead>
            <tr>
              <th class="tableCheck"
                  nzShowCheckbox
                  [(nzChecked)]="isAllCheck"
                  [nzIndeterminate]="isIndeterminate"
                  (nzCheckedChange)="checkAll($event)"
              ></th>
              <th>房间号</th>
              <th nzWidth="250px">房间名称</th>
              <th>房间类型</th>
              <th>楼栋</th>
              <th>楼层</th>
              <th>面积(m<sup>2</sup>)</th>
              <th nzWidth="200px">备注</th>
              <th nzWidth="140px" *ngIf="showBtns == 1">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of list">
              <td
                nzShowCheckbox
                [(nzChecked)]="mapOfCheckedId[item.id]"
                (nzCheckedChange)="refreshStatus()"
              ></td>
              <td>{{item.number}}</td>
              <td>
                <span style="width: 250px;display: inline-block;" class="spance" title="{{item.name}}">{{item.name}}</span>
              </td>
              <td>{{item.typeCode}}</td>
              <td>{{item.buildingName}}</td>
              <td>{{item.floorName}}</td>
              <td>{{item.areas}}</td>
              <td>
                <span class="spance" style="max-width: 200px;display: inline-block" title="{{item.remark}}">{{ item.remark}}</span>
              </td>
              <td *ngIf="showBtns == 1">
                <span class="operaFont firOpera" (click)="linkRoom(item)">关联</span>
                <span class="operaFont firOpera" (click)="editRoom(item)">编辑</span>
                <span class="operaFont"
                      nz-popconfirm
                      nzOkType="danger"
                      [nzTitle]="'确定删除'+item.name+'房间吗?'"
                      (nzOnConfirm)="deleteRoom(item.id)"
                >删除</span>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </div>
</div>

<!--新增楼栋或楼层-->
<nz-modal [(nzVisible)]="isFloor"
          nzWidth="350px"
          [nzTitle]="floorTitle"
          [nzContent]="floorContent"
          (nzOnCancel)="isFloor = false"
          [nzFooter]="floorModel"
          nzMaskClosable="false"
>
  <ng-template #floorTitle>
    新增名称
  </ng-template>
  <ng-template #floorContent>
    <form nz-form [formGroup]="buildFloorForm">
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="7">
          名称
        </nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="12">
          <input nz-input placeholder="请输入名称"
                 formControlName="name"
                 [(ngModel)]="buildFloor.name"/>
          <nz-form-explain
            *ngIf="buildFloorForm.get('name')?.dirty && buildFloorForm.get('name')?.errors"
          >名称必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <ng-template #floorModel>
    <button nz-button nzType="default" (click)="isFloor = false">取消</button>
    <button nz-button nzType="primary" [disabled]="!buildFloorForm.valid" (click)="submitBuildFloor()">保存</button>
  </ng-template>
</nz-modal>

<!--新增编辑房间-->
<nz-modal [(nzVisible)]="isRoom"
          nzWidth="535px"
          [nzTitle]="roomTitle"
          [nzContent]="roomContent"
          (nzOnCancel)="isRoom = false"
          [nzFooter]="roomModel"
          nzMaskClosable="false"
>
  <ng-template #roomTitle>
    {{room.id ? '编辑' : '新增'}}房间
  </ng-template>
  <ng-template #roomContent>
    <form nz-form [formGroup]="roomForm">
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6">
          楼层
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <nz-cascader [nzOptions]="treeNodesDatas"
                       [nzPlaceHolder]="'请选择楼层'"
                       [nzLabelProperty]="'title'"
                       [nzValueProperty]="'key'"
                       formControlName="buildFloorIds"
                       [(ngModel)]="buildFloorIds"
                       (ngModelChange)="changeBuildFloor($event)"
          >
          </nz-cascader>
          <nz-form-explain
            *ngIf="roomForm.get('floorId')?.dirty && roomForm.get('floorId')?.errors"
          >楼层必选
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6">
          房间号
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <input nz-input placeholder="请输入房间号"
                 formControlName="number"
                 [(ngModel)]="room.number"/>
          <nz-form-explain
            *ngIf="roomForm.get('number')?.dirty && roomForm.get('number')?.errors"
          >房间号必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6">
          房间名称
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <input nz-input placeholder="请输入房间名称"
                 formControlName="name"
                 [(ngModel)]="room.name"/>
          <nz-form-explain
            *ngIf="roomForm.get('name')?.dirty && roomForm.get('name')?.errors"
          >房间名称必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6">
          房间类型
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <nz-select style="width: 100%;" nzPlaceHolder="请选择房间类型"
                     formControlName="type"
                     [(ngModel)]="room.type" nzAllowClear>
            <nz-option *ngFor="let item of roomTypeList"
                       [nzValue]="item.keyValue"
                       [nzLabel]="item.keyCode"
            ></nz-option>
          </nz-select>
          <nz-form-explain
            *ngIf="roomForm.get('name')?.dirty && roomForm.get('name')?.errors"
          >房间类型必选
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6">
          负责人
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <nz-select style="width: 100%;" nzPlaceHolder="请选择负责人"
                     formControlName="inChargePersonId"
                     [(ngModel)]="room.inChargePersonId" nzAllowClear nzShowSearch>
            <nz-option *ngFor="let item of chargePerson"
                       [nzValue]="item.id"
                       [nzLabel]="item.name"
            ></nz-option>
          </nz-select>
          <nz-form-explain
            *ngIf="roomForm.get('inChargePerson')?.dirty && roomForm.get('inChargePerson')?.errors"
          >负责人必选
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6">
          面积(m<sup>2</sup>)
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <nz-input-number style="width: 100%" formControlName="areas" nzPlaceHolder="请输入面积" [(ngModel)]="room.areas" [nzMin]="0" [nzStep]="0.01"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6">
          楼栋号
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <input type="text" nz-input formControlName="modelNumber" placeholder="请输入楼栋号" [(ngModel)]="room.modelNumber">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6">
          模型编号
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <input type="text" nz-input formControlName="mxId" placeholder="请输入模型编号" [(ngModel)]="room.mxId">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6">
          备注
        </nz-form-label>
        <nz-form-control [nzSm]="16">
          <input nz-input placeholder="请输入备注"
                 formControlName="remark"
                 [(ngModel)]="room.remark"/>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <ng-template #roomModel>
    <button nz-button nzType="default" (click)="isRoom = false">取消</button>
    <button nz-button nzType="primary" [disabled]="!roomForm.valid" (click)="submitRoom()">保存</button>
  </ng-template>
</nz-modal>

<!--关联-->
<nz-modal [(nzVisible)]="linkModal"
          nzWidth="40%"
          [nzTitle]="linkTitle"
          [nzContent]="linkContent"
          (nzOnCancel)="linkModal = false"
          [nzFooter]="linkModel"
          nzMaskClosable="false"
>
  <ng-template #linkTitle>
    关联场地
  </ng-template>
  <ng-template #linkContent>
    <form nz-form [formGroup]="linkForm">
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="5">
          场地名称
        </nz-form-label>
        <nz-form-control [nzSm]="17" [nzXs]="12">
          <nz-select style="width: 100%;" nzMode="multiple" [(ngModel)]="linkRoomVal" nzAllowClear nzPlaceHolder="请选择" formControlName="linkRoomId">
            <nz-option *ngFor="let item of jwList" [nzValue]="item.cdId" [nzLabel]="item.cdMc"></nz-option>
          </nz-select>
          <nz-form-explain
            *ngIf="linkForm.get('linkRoomId')?.dirty && linkForm.get('linkRoomId')?.errors"
          >场地必选
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <ng-template #linkModel>
    <button nz-button nzType="default" (click)="linkModal = false">取消</button>
    <button nz-button nzType="primary" [disabled]="!linkForm.valid" (click)="submitLink()">保存</button>
  </ng-template>
</nz-modal>
